<template>
  <div class="myContailer" id="subOutputRank-print">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{this.title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="add" v-if="isShow(125)">新 增</el-button>
        <!-- <el-button type="primary" class="myBgGreen">导出Excel</el-button> -->
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">
      <el-col :span="6">
      <template>
        <el-cascader
            placeholder="全部项目/小区"
            :options="regionOptions"
            change-on-select
            v-model="regionOptSelected"
          ></el-cascader><!-- change-on-select -->
      </template>
      </el-col>
      <el-col :span="4">
        <el-select v-model="residentTypeSelected"
          clearable
          placeholder="请选择用户类型">
          <el-option
              v-for="item in Object.keys(residentTypeList)"
              :key="residentTypeList[item]"
              :label="residentTypeList[item]"
              :value="item">
            </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input  v-model="kw" placeholder="请输入关键字"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="fuzzySearch">查 询</el-button>
      </el-col>
    </el-row>
    
    	<el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="100"
            :index="indexMethod"
            >
          </el-table-column>
          <el-table-column
            prop="user_name"
            label="姓名"
            width="150"
            >
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="80"
            >
            <template scope="scope">
              <span v-if="scope.row.sex==0">女</span>
              <span v-if="scope.row.sex==1">男</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机"
            width="150"
            >
          </el-table-column>
          <el-table-column
            prop="room_infos"
            label="房间信息"
            >
            <template scope="scope">
              <span>{{scope.row.room_infos | roomStr}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="resident_type"
            width="150"
            label="用户类型"
            >
              <template scope="scope">
              <span>{{scope.row.resident_type| residentType}}</span>
            </template>

          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template scope="scope">
              <el-button @click="getDetail(scope.row.user_id)" class="look" type="text" size="small">查看</el-button> |
              <el-button type="text primary" @click="modify(scope.row.user_id)" class="look" size="small" v-if="isShow(126)">编辑</el-button> |
     <!--          <el-button type="text warning" @click="dy" class="look" size="small">打印</el-button> |-->
              <el-button type="text warning" @click="deleteData(scope.row.user_id)" class="look" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div> 
      </el-col>
    </el-row>
    

    <!-- 确定删除弹框开始 -->
    <el-dialog title="删除" class="myRoleDialog" :visible.sync="deleteDialog">
      <div>是否确定删除这条数据？</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="deleteDialog = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="sureDelete">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 确定删除弹框结束 -->
  </div>
</template>

<style scoped>
  .myContailer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }

</style>

<script>
  // import optVue from '../../../config/optVue.js';
  import { getResidentList, residentTypeList , deleteResident } from '@/api/resident';
  import { extractAreaIds , onSetArea } from '@/utils/misc';
  import { getRegion } from '@/utils/localstorage';
  export default {
    data(){
      return{
        title:"用户管理",

        residentTypeSelected: null,
        residentTypeList: residentTypeList,
        loading:false,
        userTypeLoaded:false,
        regionOptions: [],
        regionOptSelected: [],

        list:[],
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
        total:null, //总条数  

        lookObj:{},
        multipleSelection: [],
        kw:"",
        id:null,
        index:null,
        idArr:[],
        deleteDialog:false,
        delete_id:''
      }
    },
    created(){
      document.title=this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
      
      this.fetchList();   
    },
    computed: {
      areaIds() {
        return extractAreaIds(this.regionOptSelected, this.regionOptions);
      }
    },
     filters: {
      residentType: function(value) {
        return residentTypeList[value];
      },
      roomStr: function(infos) {
        let roomStr = '';
        for (let i = 0; i < infos.length; i++) {
          roomStr += infos[i].area_name;
          roomStr += infos[i].display_name;
          roomStr += ' ';
        }

        return roomStr;
      }
    },
    methods:{
      fetchList() {
        let vm = this;
        const params = {
          kw: this.kw,
          resident_type: this.residentTypeSelected,
          page_num: this.page_num,
          page_size: this.page_size
        };

        vm.loading = true;
        getResidentList(this.areaIds, params)
        .then(response => {
          let res = response.data;
          vm.list = res.rows;
          vm.total = res.total;
          vm.page_num = res.page_num;
          vm.page_size = res.page_size;

          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        });
      },
      fuzzySearch() {
        this.fetchList();
//        console.log(this.regionOptSelected,this.areaIds);
      },
      handleSizeChange(val) {
        this.page_size = val;
        this.fetchList();
      },
      handleCurrentChange(val) {
        let pageNum=window.localStorage.getItem("pageNum");
        if(pageNum){
          this.page_num = Number(pageNum);
          window.localStorage.removeItem("pageNum");
        }else{
          this.page_num = val;
        }
        this.fetchList();
      },
      add(){
        this.$router.push({
          path:'/yhglComonents',
          query: {type: 'add' , pageNum: this.page_num}
        })
      },
      getDetail(id){
        this.$router.push({
          path:'/yhglComonents',
          query: {type: 'info', id: id , pageNum: this.page_num}
        })
      },
      modify(id){
        this.$router.push({
          path:'/yhglComonents',
          query: {type: 'update', id: id , pageNum: this.page_num}
        })
      },
      
     
      changeSelectYt:function(select){
        this.resident_type = select;
      },
      deleteData:function (u_id) {
        this.delete_id = u_id;
        this.deleteDialog=true;
      },
      dy:function(){     
      	 let subOutputRankPrint = document.getElementById('subOutputRank-print');
         console.log(subOutputRankPrint.innerHTML);
         let newContent =subOutputRankPrint.innerHTML;
         let oldContent = document.body.innerHTML;
         document.body.innerHTML = newContent;
         window.print();
         window.location.reload();
         document.body.innerHTML = oldContent;
         return false;      	
      },
      sureDelete:function(){
        let vm=this;
        deleteResident(vm.delete_id).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.fetchList();
        }).catch(error => {
          vm.$message.error("执行失败！");
        })
        this.deleteDialog=false;
      },
      // allDelete:function(event){
      //   if(this.multipleSelection!=0){
      //     var pageArr = {
      //       page_num : this.currentPage-1
      //     }
          
      //     var arrId = {
      //       resident_ids : this.idArr.join(",")
      //     }
      //     //console.log(JSON.stringify(arrId)) 
      //     optVue.deleteYhData(this,this.index,Tips,pageArr,arrId);
          
      //     this.idArr = [];
      //     $(".checkboxes").prop({checked:false});
      //     $(".group-checkable").prop({checked:false}) 
      //   }
      //   else{
      //     Tips.init({
      //       type:"fail",
      //       message:"请选择要删的项",
      //       class:"on"
      //     });
      //   }
      // },
     
    
      
     
      
     
      changeSelect:function(select){
        this.resident_type = select;
        //console.log(this.staff_status)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        if(val.length!=0){
          for(var i = 0;i<val.length;i++){
            this.idArr.push(val[i].area_id)
          }
        }else{
          this.idArr = [];
        }
       
        //console.log(JSON.stringify(this.idArr))
      },
      
      indexMethod(index) {
          return (this.page_num-1)*this.page_size + index + 1
      }

    }

  }


</script>



